<template>
  <div class="side-container">
    <div class="user-avatar">
      <el-avatar shape="square" class="avatar" :src="photo" />
    </div>
    <div class="menu-list">
      <div class="menu-item-top">
        <template v-for="(item, index) in menuList.topChildren" :key="index">
          <div class="menu-list-item">
            <router-link :to="item.path">
              <i
                class="iconfont"
                :class="[item.icon, item.key === active ? 'iconfont-active' : '']"
                :title="item.title"
                @click="active = item.key"
              />
            </router-link>
          </div>
        </template>
      </div>
      <div class="menu-item-bottom">
        <template v-for="(item, index) in menuList.bottomChildren" :key="index">
          <div class="menu-list-item">
            <router-link :to="item.path">
              <i
                class="iconfont"
                :class="[item.icon, item.key === active ? 'iconfont-active' : '']"
                :title="item.title"
                @click="active = item.key"
              />
            </router-link>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import avatar from '@/assets/avatar.jpg'

defineOptions({
  name: 'SideBar'
})

const menuList = reactive({
  topChildren: [
    { icon: 'icon-message', title: '聊天', key: 'message', path: 'message' },
    { icon: 'icon-friends', title: '通讯录', key: 'friends', path: 'contact' }
  ],
  bottomChildren: [{ icon: 'icon-more', title: '设置及其他', key: 'more', path: '' }]
})
const photo = ref(avatar)
const active = ref(menuList.topChildren[0].path)
</script>

<style lang="scss" scoped>
.side-container {
  width: 55px;
  background-color: #2e2e2e;
  padding-top: 20px;
}

.user-avatar {
  width: 35px;
  height: 35px;
  padding: 10px;

  .avatar {
    width: 100%;
    height: 100%;
  }
}

.menu-list {
  height: calc(100% - 55px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .menu-item-bottom {
    margin-bottom: 10px;
  }

  .menu-list-item {
    width: 35px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .menu-list-item > a {
    text-decoration: none;
  }

  .iconfont {
    font-size: 1em;
    color: #aaaaaa;
  }

  .iconfont-active {
    color: #07c160;
  }
}
</style>
